<!doctype html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="">
<!--<![endif]-->

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <title>DeepDR</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/normalize.min.css">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/jquery.fancybox.css">
  <link rel="stylesheet" href="css/flexslider.css">
  <link rel="stylesheet" href="css/styles.css">
  <link rel="stylesheet" href="css/queries.css">
  <link rel="stylesheet" href="css/etline-font.css">
  <link rel="stylesheet" href="bower_components/animate.css/animate.min.css">
  <link rel="stylesheet" href="css/font-awesome.min.css">
</head>

<body id="top">
<section class="hero" id="hero">
  <section class="navigation">
    <header>
      <div class="header-content">
        <!-- <div class="logo"><a href="#"><img src="img/sedna-logo.png" alt="Sedna logo"></a></div> -->
        <div class="header-nav">
          <nav>
            <ul class="primary-nav">
              <li><a href="#hero">首页</a></li>
              <li><a href="#addingImg">开始检测</a></li>
              <li><a href="#reports">检测列表</a></li>
              <li><a href="#detail">查看报告</a></li>
              <li><a href="#signup" class="login">登录/注册</a></li>
            </ul>
            <ul class="member-actions">
              <li><a href="#signup" class="btn-white btn-small">注册</a></li>
            </ul>
          </nav>
        </div>
        <div class="navicon"><a class="nav-toggle" href="#"><span></span></a></div>
      </div>
    </header>
  </section>
  <div class="container">
    <div class="row">
      <div class="col-md-10 col-md-offset-1">
        <div class="hero-content text-center">
          <h1>DeepDR</h1>
          <p class="intro">眼底病变自动诊断系统</p>
          <a href="#addingImg" class="btn btn-accent btn-large btn-margin-right">选择图片</a>
          <a href="#" class="btn btn-accent btn-large">登录</a></div>
      </div>
    </div>
  </div>
  <div class="down-arrow floating-arrow"><a href="#addingImg"><i class="fa fa-angle-down"></i></a></div>
</section>


<section class="intro section-padding">
  <div class="container">
    <div class="row">
      <div class="col-md-4 intro-feature">
        <div class="intro-icon"><span data-icon="&#xe033;" class="icon"></span></div>
        <div class="intro-content">
          <h5>基于深度学习的全自动诊断技术</h5>
          <p>我们使用深度学习技术,对医生的诊断模型进行学习,构建最接近医生诊断模式的自动诊断系统</p>
        </div>
      </div>
      <div class="col-md-4 intro-feature">
        <div class="intro-icon"><span data-icon="&#xe030;" class="icon"></span></div>
        <div class="intro-content">
          <h5>增强学习技术</h5>
          <p>我们的诊断模型能够根据医生对结果的纠正进行自我修正，在空闲时段进行增强学习，随着使用量的增加以及眼底图像数据的增加讲得到越来越精确的结果</p>
        </div>
      </div>
      <div class="col-md-4 intro-feature">
        <div class="intro-icon"><span data-icon="&#xe046;" class="icon"></span></div>
        <div class="intro-content last">
          <h5>方便的数据管理，诊断修改，历史数据查询</h5>
          <p>可以构建针对病人的数据库，定量化的诊断数据结合长期的病变历史，给病变跟踪，病变发展研究带来便利</p>
        </div>
      </div>
    </div>
  </div>
</section>


<section class="features section-padding" id="addingImg">
  <div class="container">
    <div class="row">
      <div class="col-md-12 col-md-offset-0">
        <div class="feature-list">
          <h3>添加新的图片</h3>
          <p>请是输入患者相关信息，选择需要诊断的图片，点击确定开始自动整段。</p>
          <p>部分报告生成时间可能较长,可以在检测记录中查看诊断进度。</p>
          <div class="panel panel-default text-center">
            <div class="panel-heading">患者信息</div>
            <div class="panel-body">
              <form id="val_info">
                <div class="input-group">
                  <span class="input-group-addon">患者姓名</span>
                  <input type="text" class="form-control" placeholder="姓名" id="val_name">
                  <span class="input-group-addon">患者性别</span>
                  <input type="text" class="form-control" placeholder="性别" id="val_gender">
                  <span class="input-group-addon">患者床号</span>
                  <input type="text" class="form-control" placeholder="住院号/床号" id="val_number">
                  <span class="input-group-addon">病变图片</span>
                  <input type="file" class="form-control" placeholder="住院号/床号" id="val_original_img">
                </div>
              </form>
              <div class="media">
                <img src="img/image-not-found.png" class="img-thumbnail" id="img-original-img" width="70%">
              </div>
              <div class="btn-group" role="group" aria-label="...">
                <a class="btn btn-default " id="new-diagnose"> 提 交 </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>


<section class="features-extra section-padding" id="reports">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="feature-list">
          <h3>诊断报告查询</h3></div>
      </div>
    </div>
    <div class="row" id="report-list">
      <div class="col-sm-6 col-md-4">
        <div class="thumbnail"><img src="img/test2.jpg" alt="...">
          <div class="caption">
            <h3>患者姓名：李四</h3>
            <p>当前状态:已完成</p>
            <p>病情描述: 眼底散在微血管瘤，小出血点，轻度NPDR</p>
            <p>
              <a href="#" class="btn btn-primary" role="button">查看详细报告</a>
              <a href="#" class="btn btn-default" role="button">修改报告</a>
            </p>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-4">
        <div class="thumbnail"><img src="img/test1.jpg" alt="...">
          <div class="caption">
            <h3>患者姓名：张三</h3>
            <p>当前状态:已完成</p>
            <p>病情描述:散在微血管瘤/小出血点，后极部散在硬性渗出，中度NPDR</p>
            <p>
              <a href="#" class="btn btn-primary" role="button">查看详细报告</a>
              <a href="#" class="btn btn-default" role="button">修改报告</a>
            </p>
          </div>
        </div>
      </div>
    </div>
    <nav>
      <ul class="pagination">
        <li>
          <a href="#" aria-label="Previous"> <span aria-hidden="true">&laquo;</span> </a>
        </li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li>
          <a href="#" aria-label="Next"> <span aria-hidden="true">&raquo;</span> </a>
        </li>
      </ul>
    </nav>
  </div>
</section>


<section class="features section-padding" id="detail">
  <div class="diaDetailViewClass" id="mainDetailView">
  </div>
</section>


<section class="sign-up section-padding text-center" id="signup">
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-md-offset-3">
        <h3>DeepDR系统登陆/注册</h3>
        <p>请输入邮箱以及密码登陆账户。如果您尚未注册,我们讲给您发送包含注册信息的邮件,请点击邮件内的链接激活账户</p>
        <form class="signup-form" action="#" method="POST" role="form">
          <div class="form-input-group"><i class="fa fa-envelope"></i>
            <input type="text" class="" placeholder="请输入邮箱" required></div>
          <div class="form-input-group"><i class="fa fa-lock"></i>
            <input type="text" class="" placeholder="请输入密码" required></div>
          <button type="submit" class="btn-fill sign-up-btn">注 册 账 号</button>
        </form>
      </div>
    </div>
  </div>
</section>
<section class="to-top">
  <div class="container">
    <div class="row">
      <div class="to-top-wrap"><a href="#top" class="top"><i class="fa fa-angle-up"></i></a></div>
    </div>
  </div>
</section>

<!--<script src="js/jquery.js"></script>-->
<script src="js/vendor/jquery-1.11.2.min.js"></script>
<script src="bower_components/retina.js/dist/retina.js"></script>
<script src="js/jquery.fancybox.pack.js"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script src="bower_components/classie/classie.js"></script>
<script src="bower_components/jquery-waypoints/lib/jquery.waypoints.min.js"></script>

<script src="js/json2.js"></script>
<script src="js/underscore.js"></script>
<script src="js/backbone.js"></script>
<script src="js/deepDR.js"></script>

<script type="text/template" id="Diagnose-item-template">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail"><img src="img/image-not-found.png" alt="...">
      <div class="caption">
        <h3>患者姓名: <%- name %> </h3>
        <p>当前状态: <%- status %></p>
        <p>病情描述: <%- desp %></p>
        <p>
          <a href="#" class="btn btn-primary" role="button">查看详细报告</a>
          <a href="#" class="btn btn-default" role="button">修改报告</a>
        </p>
      </div>
    </div>
  </div>
</script>


<script type="text/template" id="diaDetailTemplate">
  <div class="diaDetailViewClass">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <div class="feature-list">
            <h3>诊断报告</h3></div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <div class="panel panel-default text-center">
            <div class="panel-heading">患者信息</div>
            <div class="panel-body">
              <div class="input-group"><span class="input-group-addon">患者姓名</span>
                <input type="text" class="form-control" placeholder="姓名" value="<%- name %>">
              </div>
              <div class="input-group"><span class="input-group-addon">患者性别</span>
                <input type="text" class="form-control" placeholder="性别" value="<%- gender %>">
              </div>
              <div class="input-group"><span class="input-group-addon">患者床号</span>
                <input type="text" class="form-control" placeholder="住院号/床号" value="<%- patientID %>">
              </div>
            </div>
          </div>
          <div class="panel panel-default text-center">
            <div class="panel-heading">病变图片</div>
            <div class="panel-body">
              <a class="thumbnail"> <img src="<%- originalPicture %>"> </a>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">检测数据</div>
            <div class="panel-body">
              <div class="panel-heading"></div>
              <div class="panel-body">
                <table class="table">
                  <tr>
                    <th>病变类型</th>
                    <th>病变计数</th>
                    <th>病变面积（像素）</th>
                    <th>面积占比</th>
                  </tr>
                  <% diagnoseResult.forEach(function (item) {
                    console.log(JSON.stringify(item));
                  %>
                  <tr>
                    <td><%- item[0] %></td>
                    <td><%- item[1] %></td>
                    <td><%- item[2] %></td>
                    <td><%- item[3] %></td>
                  </tr>
                  <% }) %>
                </table>
                <a href="<%- report %>">查看检测报告</a>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              检测结果说明
            </div>
            <div class="panel-body">
              <div class="col-md-10">
                <div class="btn-group btn-group-justified" role="group">
                  <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false">
                      病变位置
                      <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                      <li><a>后极部</a></li>
                      <li><a>视乳头上方</a></li>
                      <li><a>视乳头下方</a></li>
                      <li><a>黄斑区上方</a></li>
                      <li><a>黄斑区下方</a></li>
                    </ul>
                  </div>
                  <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false">
                      病变严重程度
                      <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                      <li><a>疑似出现</a></li>
                      <li><a>散在</a></li>
                      <li><a>出现</a></li>
                      <li><a>大量出现</a></li>
                      <li><a>......</a></li>
                    </ul>
                  </div>
                  <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false">
                      病变类型
                      <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                      <li><a>微血管瘤/小出血点</a></li>
                      <li><a>硬性渗出</a></li>
                      <li><a>软性渗出</a></li>
                      <li><a>出血</a></li>
                      <li><a>新生血管</a></li>
                      <li><a>......</a></li>
                    </ul>
                  </div>
                  <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false">
                      病变分级
                      <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                      <li><a>未见NPDR</a></li>
                      <li><a>轻度NPDR</a></li>
                      <li><a>中度NPDR</a></li>
                      <li><a>重度NPDR</a></li>
                      <li><input type="text" placeholder="请输入病变分级"></li>
                    </ul>
                  </div>
                </div>
              </div>
              <button type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
              </button>
              <button type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
              </button>
            </div>
            <ul class="list-group">
              <a class="list-group-item active">后极部散在硬性渗出</a>
              <a class="list-group-item">视乳头下方疑似软性渗出</a>
              <a class="list-group-item">新生血管</a>
              <a class="list-group-item">轻度NPDR</a>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</script>

</body>

</html>
